<template>
	<div class="video-view">
		<div class="side-bar">
			<div class="side-item" :class="[activeMenu == '1' ? 'active' : '']" @click="handleMenuChange('1')">
				<i class="el-icon-s-operation"></i><span>章节</span>
			</div>
			<div class="side-item" :class="[activeMenu == '2' ? 'active' : '']" @click="handleMenuChange('2')">
				<i class="el-icon-s-comment"></i><span>评论</span>
			</div>
		</div>
		<div class="chapter-box">
			<div class="chapter" v-for="item in chapterList" :key="item.id">
				<div class="chapter-bd">
					<div class="name-box">
						<div class="name">{{ item.title}}</div>
					</div>
					<div class="media-list-box">
						<div class="media-item" v-for="media in item.mediaList" :key="media.id"
						@click="handleVideoView(media)">
							<i class="el-icon-video-camera-solid"></i>
							<div class="type-text">视频: </div>
							<div class="title-info">{{ media.name}}({{media.time}})</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="video-box">
			<video :src="videoUrl" controls></video>
			<!-- <video src="https://www.runoob.com/try/demo_source/movie.mp4" controls v-show="activeMenu == '1'"></video> -->
			<div class="comment" v-show="activeMenu == '2'">
				<div class="comment-box">
				<div class="comment-head">
					<img class="comment-icon" src="@/assets/images/icons/replay.png" alt="">
					<span>评价</span>
				</div>
				<div class="comment-content">
					<div class="comment-textarea">
						<el-input
						v-model="commentForm.content"
						type="textarea"
						:rows="2"
						placeholder="请输入内容"
						>
						</el-input>
					</div>
					<div class="comment-bar">
						<div class="rate-box">
							<span>评分</span>
							<el-rate
								v-model="commentForm.rating"
								show-score
								text-color="#ff9900">
							</el-rate>
						</div>
						<div class="btns">
							<el-button type="primary" @click="handleAddComment()">提交</el-button>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
import user from '@/store/modules/user'
import { getChapterVideos, addComment } from '@/api/web/index'
export default {
	name: 'VideoView',
	data() {
		return {
			courseId: '',
			//当前播放视频id
			curId: '',
			//章节视频列表
			chapterList: [],
			//视频地址
			videoUrl: '',
			//选择按钮
			activeMenu: '1',
			//评价表单
			commentForm: {
				content: '',
				rating: 0
			}
		}
	},
	mounted() {
		this.courseId = this.$route.query.courseId;
		this.curId = this.$route.query.mediaId;
		this.queryChapters();
	},
	methods: {
		/**
		 * 查询课程章节目录
		 */
		 async queryChapters() { 
			let res = await getChapterVideos(this.$route.query.courseId)
			if (res.code == 200) { 
				this.chapterList = res.data;
				if (this.curId && this.curId !== '') {
					res.data.forEach(item => {
						item.mediaList.forEach(m => {
							if (m.id == this.curId) {
								this.videoUrl = m.videoUrl;
							}
						})
					})
				} else { 
					this.videoUrl = res.data[0].mediaList[0].videoUrl;
				}
				// console.log('this.videoUrl',this.videoUrl)
			}	
		},
		/**
		 * 观看视频
		 * @param media 
		 */
		handleVideoView(media) { 
			console.log(media)
			this.videoUrl = media.videoUrl;
		},
		/**
		 * 切换菜单
		 * @param val 
		 */
		handleMenuChange(val) { 
			this.activeMenu = val;
		},
		/**
		 * 新增评论
		 */
		async handleAddComment() { 
			let uid = user.state.id;
			let res = await addComment({
				userId: uid,
				projectId: this.courseId,
				content: this.commentForm.content,
				rating: this.commentForm.rating
			});
			if (res.code == 200) {
				this.$message({
					message: '评价成功！',
					type: 'success',
				})
				this.commentForm.content = '';
				this.commentForm.rating = 0;
			} else { 
				this.$message({
					message: '评价失败！',
					type: 'error',
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.video-view {
	width: 100%;
	display: flex;
	flex-direction: row;
	.side-bar {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 60px;
		background-color: #1c1f21;
		max-height: 760px;
		.side-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100px;
			color: #fff;
			cursor: pointer;
			margin-bottom: 30px;
			text-align: center;
			> i {
				font-size: 28px;
				margin-bottom: 4px;
			}
			&.active {
				background-color: #26292c;
			}
		}
	}
	.chapter-box {
		width: 400px;
		max-height: 760px;
		overflow: auto;
		padding: 0 30px;
		background: #26292c;
		// box-shadow: 0 8px 16px 0 #1c1f21;
		.chapter {
			width: 100%;
			padding: 10px 0;
			border-bottom: 1px solid rgba(28, 31, 33, .1);
		}
		.chapter-bd {
			width: 100%;
			.name-box {
				width: 100%;
				display: flex;
				line-height: 24px;
				margin-bottom: 8px;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.name {
					font-weight: 700;
					font-size: 14px;
					color: #fff;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.media-list-box {
				width: 100%;
				.media-item {
					width: 100%;
					height: 48px;
					display: flex;
					flex-direction: row;
					align-items: center;
					line-height: 48px;
					transition: all .2s ease-in-out;
					&:hover {
						i {
							color: #e6fa08;
						}
						div {
							color: #e6fa08;
						}
					}
					> i {
						margin-right: 5px;
						color: rgba(255,255,255,.6);
					}
					.type-text {
						font-size: 14px;
						color: rgba(255,255,255,.6);
						line-height: 24px;
						font-weight: 700;
						margin-right: 5px;
					}
					.title-info {
						max-width: 600px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						vertical-align: middle;
						color: rgba(255,255,255,.6);
						cursor: pointer;
						font-size: 14px;
					}
				}
			}
		}
	}
	.video-box {
		width: calc(100% - 460px);
		height: 760px;
		video {
			width: 100%;
			height: 100%;
			background-color: #000;
		}
	}
	.comment {
		padding: 0 30px;
	}
	.comment-box {
		width: 100%;
		margin-top: 20px;
		.comment-head {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 2px solid #3366cc;
			padding-bottom: 8px;
			.comment-icon {
				width: 26px;
				margin-right: 5px;
			}
			span {
				font-size: 18px;
			}
		}
		.comment-content {
			width: 100%;
			padding-top: 20px;
			.comment-textarea {
				width: 100%;
				height: 140px;
				border: 1px solid #ededed;
				.el-textarea {
					height: 100%;
				}
			}
			.comment-bar {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-top: 20px;
				.rate-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					> span {
						margin-right: 10px;
					}
				}
			}
		}
	}
}
.comment-box ::v-deep .el-textarea__inner {
	border: none !important;
	box-shadow: none !important;
	height: 100%;
}
</style>